<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内边距</title>
    <style>
      div {
        /* width: 190px;
        height: 190px; */

        box-sizing: border-box;
        width: 300px;
        height: 300px;
        background-color: pink;
        border: 5px solid red;

        /*
          内边距
          注意:
          盒模型中,默认情况下元素的实际大小会受到边框和内边距的影响
          例如当前案例中,四边框都是5px,四面内边距都是50px,而原始div的大小是300px,所以
          实际横向宽度 = 5 * 2 + 50 * 2 + 300 = 410px
          实际横向高度 = 5 * 2 + 50 * 2 + 300 = 410px
          公式:
          元素实际的高宽 = 元素设置的高宽 + 对应两边的边框粗细 + 对应两边的内边距

          如何解决这个问题:
          方式一: 设置元素原始大小时,减去边框和内边距的大小(手动计算)
          方式二: 在容器上提供box-sizing: border-box属性来让容器自动计算

          padding在实际开发中的意义: 撑开盒子

          注意: 行内元素在水平方向上的内边距设置是有效的(影响盒子布局)，在垂直方向上的内边距设置是无效的(不影响盒子布局)!!!


          第一种写法:
              padding-top           上内边距
              padding-right         右内边距
              padding-bottom        下内边距
              padding-left          左内边距

          第二种写法:
              padding
              一个参数               表示四个方向内边距
              两个参数               表示上右内边距,对面(下左)镜像
              三个参数               表示上右下,对面(左)镜像
              四个数                 表示上右下左内边距
        */
        /* padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px; */

        padding: 50px;
      }

      a {
        background-color: pink;
      }

      span {
        background-color: palevioletred;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>内容</div>

    <a href="#">超链接</a>

    <span>这是span</span>
    <b>加粗的文字</b>
    <p>这是一个段落</p>
  </body>
</html>
